import React, { Component } from 'react'
import ComponentA from './components/ComponentA'
import { Provider } from './utils/context'
import { connect } from 'react-redux'

class App extends Component {
  state = {
    title: '1906A',
    name: '祖宗'
  }

  changeTitle = (e = "八维") => {
    this.setState({
      title: e,
    })
  }

  changeName = (e) => {
    this.setState({
      name: e
    })
  }

  changeStoreTitle = () => {
    const { storeChangeTitle } = this.props

    storeChangeTitle()
  }


  render() {
    const { title, name } = this.state
    const { storeTitle } = this.props
    return <Provider value={{name: name, changeTitle: this.changeName}}>
      <div>
        {title}
        <h2>{storeTitle}</h2>
        <ComponentA title={title} changeTitle={this.changeTitle} />
        <button onClick={() => this.changeTitle()}>在父组件中修改state</button>
        <button onClick={() => this.changeStoreTitle()} >修store中的数据</button>
      </div>
    </Provider>

  }
}

const mapStateToProps = state => state

const mapDispatchToProps = dispatch => {
  const storeChangeTitle = () => {
    dispatch({type: 'changeStoreTitle', title: '通过mapDispatchToProps修改'})
  }
  
  return {
    storeChangeTitle
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)